<template>
    <div class="app-container">
        <el-table :data="tableData" border>
            <el-table-column label="编号" width="60">
                <template #default="{ row }">
                    {{ row.id }}
                </template>
            </el-table-column>
            <el-table-column label="资源名称">
                <template #default="{ row }">
                    {{ row.name }}
                </template>
            </el-table-column>
            <el-table-column label="资源路径">
                <template #default="{ row }">
                    {{ row.url }}
                </template>
            </el-table-column>
            <el-table-column label="描述">
                <template #default="{ row }">
                    {{ row.description }}
                </template>
            </el-table-column>
            <el-table-column label="添加时间">
                <template #default="{ row }">
                    {{ dayjs(row.createTime).format("YYYY/MM/DD:mm:ss") }}
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
            :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import * as http from "@/request/http"
import { dayjs } from 'element-plus'
import { reactive, ref } from "vue";

const tableData = ref<IresourceList[]>([])

const paginationParams = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 30
})

const getResource = () => {
    http.resource.resourceList({
        pageNum: paginationParams.currentPage,
        pageSize: paginationParams.pageSize,
    }).then(res => {
        tableData.value = res.data.list
        paginationParams.total = res.data.total
    })
}
getResource()

const handleSizeChange = (val: number) => {
    paginationParams.pageSize = val
    getResource()
}
const handleCurrentChange = (val: number) => {
    paginationParams.currentPage = val
    getResource()
}

</script>

<style scoped lang="less">
.el-pagination {
    padding: 20px 20px;
    float: right;
}
</style>